<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>药植物分布</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <style type="text/css">
        html{height:100%}
        body{height:70%;margin:0px;padding:0px}
        img{border:thick solid #000000;height="700px" ;width="1000px" ;align="top"}
        #container{height:50%;width:50%;border:thick solid  #000000}
    </style>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=jDIWum5BVw19QwZwSAdHWoL44lHF8QFM"></script>
</head>
<body>
<div class="container-lg mb-5 pt-4" >
    <h1 align="center">SWUN药用植物分布可视化</h1>
     <section>
     <ul class="nav nav-pills">
      <li role="presentation" class="active"><a href="http://127.0.0.1:8000/list">返回列表</a></li>
    </ul>
    </section>
		<div class="row">
			<div class="col-sm-10 offset-sm-1 col-lg-7 offset-lg-0">
				<div class="d-lg-none">
					<h3 class="font-weight-bold collectionCode"></h3>
					<h6 class="mb-0 institution"></h6>
					<hr />
				</div>
                <img src="{{ MEDIA_URL }}{{ curr_collect.photo }}"  /> <!--图片显示-->
				<hr class="d-lg-none" />
			</div>
			<div class="col-lg-5">

				<div class="row d-none d-lg-block">
					<div class="col-sm-10 offset-sm-1 col-lg-12 offset-lg-0">
						<h3 class="font-weight-bold collectionCode"></h3>
						<h6 class="mb-0 institution"></h6>
						<hr />
					</div>
				</div>
<!--				<div class="row">-->
<!--					<div class="col-sm-10 offset-sm-1 col-lg-12 offset-lg-0">-->
<!--						<h6 class="text-secondary small mb-3" data-i18n="spmInfoTaxon">分类树</h6>-->
<!--						<div id="taxon_rank"></div>-->
<!--					</div>-->
<!--				</div>-->

				<div class="row">
					<div class="col-sm-10 offset-sm-1 col-lg-12 offset-lg-0">
						<h6 class="text-secondary small mb-3" data-i18n="spmInfoIdentify">基本信息</h6>
						<table class="table table-borderless table-sm mb-2">
							<tbody>
								<tr>
									<td style="width: 5rem"><strong data-i18n="spmInfoSciName">学名</strong></td>
									<td id="formattedName">{{ curr_collect.name }}</td>
								<tr>
								<tr>
									<td><strong data-i18n="spmInfoChName">类别</strong></td>
									<td id="chineseName">{{ curr_collect.type }}</td>
								</tr>
								<tr>
									<td><strong data-i18n="identifiedBy">简介</strong></td>
									<td id="identifiedBy">{{ curr_collect.content }}</td>
								</tr>
								<tr>
									<td><strong data-i18n="spmInfoDateIdentified">鉴定时间</strong></td>
									<td id="dateIdentified">{{curr_collect.publish_date}}</td>
								</tr>
							</tbody>
						</table>
						<hr />
					</div>
				</div>

				<div class="row">
					<div class="col-sm-10 offset-sm-1 col-lg-12 offset-lg-0">
						<h6 class="text-secondary small mb-3" data-i18n="spmInfoCollect">地理信息</h6>
						<table class="table table-borderless table-sm mb-2">
							<tbody>
								<tr>
									<td style="width: 5rem"><strong data-i18n="collector">经纬度</strong></td>
									<td id="recordedBy">{{ curr_collect.location }}</td>
								</tr>
								<tr>
									<td><strong data-i18n="recordNumber">省份</strong></td>
									<td id="recordNumber">{{ curr_collect.province }}</td>
								</tr>
								<tr>
									<td><strong data-i18n="spmInfoCollectedTime">城市</strong></td>
									<td id="verbatimEventDate">{{curr_collect.city}}</td>
								</tr>
								<tr>
									<td><strong data-i18n="locality">采集地</strong></td>
									<td id="locality">{{curr_collect.province}}{{curr_collect.city}}</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>

</div>

<div id="container" > </div>
<div>
<nav aria-label="...">
  <ul class="pager">
    <li><a href="/blog/detail/{{previous_collect.id}}">上一篇:{{previous_collect.name}}</a></li>
    <li><a href="/blog/detail/{{next_collect.id}}">下一篇:{{next_collect.name}}</a></li>
    <li><a href="/index">首页</a></li>
  </ul>
</nav>
</div>
<footer style="border:1px black;align:center"> 西南民族大学计科1701艾海提</footer>


</body>
</html>
<!--<script type="text/javascript">-->
<!--	// 百度地图API功能-->
<!--	var map = new BMap.Map("allmap");    // 创建Map实例-->
<!--	map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别-->
<!--	//添加地图类型控件-->
<!--	map.addControl(new BMap.MapTypeControl({-->
<!--		mapTypes:[-->
<!--            BMAP_NORMAL_MAP,-->
<!--            BMAP_HYBRID_MAP-->
<!--        ]}));-->
<!--	map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的-->
<!--	map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放-->
<!--</script>-->
<script type="text/javascript">
	var map = new BMap.Map("container");
    var point = new BMap.Point({{curr_collect.location}});//地图定位中心
    map.centerAndZoom(point, 10);
    var marker = new BMap.Marker(point);        // 创建标注
    map.addOverlay(marker);
    var opts = {
        width : 5,     // 信息窗口宽度
        height: 5,     // 信息窗口高度
        title : "地址：{{curr_collect.province}}{{curr_collect.city}}"  // 信息窗口标题
    }
    var infoWindow = new BMap.InfoWindow("药植物名称：{{curr_collect.name}}", opts);  // 创建信息窗口对象
    map.openInfoWindow(infoWindow, map.getCenter());      // 打开信息窗口
    map.enableScrollWheelZoom(true);
</script>